<!-- 左边侧边栏组件 -->
<template>
    <div id="container">
        <div class="menuItem" v-for="(item, index) in menuList" :key="index" @click="switchMenu(index)">
            {{ item }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router"  
const router = useRouter()
const menuList: string[] = ["竞拍", "发布", "个人中心"]
// 菜单路由
function switchMenu(index: number) {
    let routerPath: string = "";
    switch (index) {
        case 0:
            routerPath = "/"
            break;
        case 1:
            routerPath = "/publish"
            break;
        case 2:
            routerPath = "/my";
            break;
    }

    router.push(routerPath)
}

</script >



<style scoped>
.menuItem {
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    background-color: #9e4f4fef;
    /* background-color: rgba(red, green, blue, alpha); */
    text-align: center;
    font-size: 20px;
    color: #f4eeee;
    font-weight: 600;
    border-radius: 10px;
    margin-top: 5px;
    cursor: pointer;
    width: 95%;
}

.menuItem:hover {
    background-color: #b37676;
    color: #f0ecec;
}

#container{
    background: url("http://localhost:8957/commons/download?picName=leftAside.webp") no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}
</style>